<script setup>
import {onMounted, ref} from 'vue'
import ModuleTitle from './moduleTitle.vue'
import ModuleFirst from './moduleFirst.vue'
import ModuleSecond from './moduleSecond.vue'
import ModeuleThird from './moduleThird.vue'

let screen = ref()
onMounted(()=>{
     screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
const getScale = (width = 1920,height = 1080)=>{
    let ww = window.innerWidth / width
    let wh = window.innerHeight / height
    return ww < wh ? ww : wh
}
// 监听容器大小 
window.onresize = () =>{
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<template>
<div class="container">
    <div class="screen" ref="screen">
        <ModuleTitle />
        <div class="main">
            <ModuleFirst />
            <ModuleSecond />
            <ModeuleThird />
        </div>
    </div>
</div>
</template>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
}
.screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;
}
</style>
